<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人员列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css" media="all">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>业主信息管理</cite></a>
			<a><cite>人员列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<form class="layui-form x-center" action="" style="width: 800px">
			<div class="layui-form-pane" style="margin-top: 15px;">
				<div class="layui-form-item">
				
					<div class="layui-input-inline">
						<input type="text" name="roomNo" placeholder="请输入房号"
							id="roomNo" autocomplete="off" class="layui-input">
					</div>
					
					
					<div class="layui-input-inline">
						<input type="text" name="username" placeholder="请输入用户名"
							id="owner_name_kw" autocomplete="off" class="layui-input">
					</div>
					<div class="layui-input-inline" style="width: 80px">
						<button class="layui-btn" lay-submit="" lay-filter="sreach"
						type="button" onclick="owner_search()">
							<i class="layui-icon">&#xe615;</i>
						</button>
					</div>
				</div>
			</div>
		</form>
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon">&#xe640;</i>批量删除
		</button>
		<button class="layui-btn"
			onclick="personnel_add('添加成员','personnel_add.jsp','1000','600')">
			<i class="layui-icon">&#xe608;</i>添加
		</button>
		</xblock>
		<table class="layui-table" id="table-ownerlist">
			<thead>
				<tr>
					<th><input type="checkbox" lay-filter="checkall" name=""
										lay-skin="primary"></th>									
					<th>所属房号</th>					
					<th>业主名称</th>					
					<th>身份证号</th>
					<th>联系方式</th>
					<th>入住时间</th>
					<th>业主照片</th>					
					<th>业主密码</th>
					<th>房屋面积</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="x-img">
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>	
					<td></td>		
					<td class="td-manage"> <a title="修改" href="javascript:;" onclick="personnel_modify('编辑','personnel_modify.jsp','4','1000','600')"
                   class="ml-5" style="text-decoration:none">
                    <i class="layui-icon">&#xe642;</i>
                </a> <a title="删除" href="javascript:;"
						onclick="personnel_del(this,'4')" style="text-decoration: none">
							<i class="layui-icon">&#xe640;</i>
					</a></td>
				</tr>
			</tbody>
		</table>

		<div class="layui-card-body ">
			<div class="page">
				<div class="layui-table-page">
					<div id="layui-table-page1">
						<div class="layui-box layui-laypage layui-laypage-default"
							id="layui-laypage-2"></div>
					</div>
				</div>
			</div>
		</div>
<!-- 引入jQuery库 -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/back/js/jquery.js"></script>
	<!-- 引入jQuery-form -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/back/js/jquery-form.js"></script>

<script>
let pageNum = 1;
let pageSize = 2;

owner_search_page();

function owner_search_page(){
	//对每页/条数变量进行校验
	pageSize = $("#layui-laypage-2 select").val();
	//如果不存在则设置初始值
	if(pageSize == null){
		pageSize = 2;
	}
	$.ajax({
		async:true,
		type:"get",
		url:"${pageContext.request.contextPath}/OwnerServlet",
		data:{
			op:"page",//分页接口
			ownerName:$("#owner_name_kw").val(),//业主关键字
			roomNo:$("#roomNo").val(),
			
			pageNum: pageNum,//页码
			pageSize: pageSize//下拉框选中的每页记录数
		},
		contentType:"application/x-www-form-urlencoded",
		dataType:"json",
		success:function(result,status,xhr){
			//1.渲染表格的数据
			let content ="";
			if(result.data != null){

				$.each(result.data.list,function(i,obj){
					content += "<tr>"
						+ "<td><input type=\"checkbox\" name=\"id\" value=\"1\" lay-skin=\"primary\"></td>"
						+ "<td>"
						+ obj.roomNo
						+ "</td>"
						+ "<td>"
						+ obj.ownerName
						+ "</td>"
						+ "<td>"
						+ obj.ownerId
						+ "</td>"
						+ "<td>"
						+ obj.ownerPhoneNumber
						+ "</td>"
						+ "<td>"
						+ obj.checkInTime
						+ "</td>";
						
					if(obj.ownerImage != null){
						//有图片就请求文件下载接口，从文件服务器中读取
						content += "<td><img width=\"50\" height=\"30\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?type=image&fileName="+obj.ownerImage+"\"/></td>"
					}else{
						//没有图片直接显示默认图
						content += "<td><img width=\"50\" height=\"30\" src=\"images/default.png\" /></td>";
					}
						
						
				content += "<td>"
						+ obj.ownerPassword
						+ "</td>"
						+ "<td>"
						+ obj.roomArea
						+ "</td>"
						+ "<td class=\"td-manage\">"
						+ "<a title=\"编辑\" href=\"javascript:;\" onclick=\"personnel_edit('编辑','personnel_modify.jsp?roomNo="+obj.roomNo+"','4','1000','600')\" class=\"ml-5\" style=\"text-decoration: none\">"
						+ "<i class=\"layui-icon\">&#xe642;</i>"
						+ "</a>"
						+ "<a title=\"删除\" href=\"javascript:;\" onclick=\"owner_del('" +obj.roomNo+ "')\" style=\"text-decoration: none\">"
						+ "<i class=\"layui-icon\">&#xe640;</i>"
						+ "</a>" + "</td>"
						+ "</tr>";
				});
				$("#table-ownerlist tbody").html(content);
			}else{
				$("#table-ownerlist tbody").empty();
			}
			
			
			
			let pageContent = "";
			if (result.data != null) {

				//判断是不是第一页
				if (result.data.pageNum == 1) {
					pageContent = "<span href=\"javascript:;\" class=\"layui-laypage-prev layui-disabled\" data-page=\"0\"><i class=\"layui-icon\">上一页</i></span>";
				} else {
					pageContent = "<a href=\"javascript:;\" class=\"layui-laypage-prev\" data-page=\""
							+ (result.data.pageNum - 1)
							+ "\"><i class=\"layui-icon\">上一页</i></a>";
				}
				for (let i = 1; i <= result.data.pages; i++) {
					//判断当前页码
					if (i == result.data.pageNum) {
						pageContent += "<span class=\"layui-laypage-curr\" data-page=\""+i+"\"><em class=\"layui-laypage-em\"></em><em>"
								+ i + "</em></span>";
					} else {
						pageContent += "<a href=\"javascript:;\" data-page=\""+i+"\">"
								+ i + "</a>";
					}

				}

				//判断是否是最后一页
				if (result.data.pageNum == result.data.pages) {
					pageContent += "<span href=\"javascript:;\" class=\"layui-laypage-next layui-disabled\" data-page=\""
							
							+ "\"><i class=\"layui-icon\">下一页</i></span>";
				} else {
					pageContent += "<a href=\"javascript:;\" class=\"layui-laypage-next\" data-page=\""
							+ (result.data.pageNum + 1)
							+ "\"><i class=\"layui-icon\">下一页</i></a>"
				}

				pageContent += "<span class=\"layui-laypage-limits\">"
						+ "<select lay-ignore=\"\">"
						+ "<option value=\"2\" >2条/页</option>"
						+ "<option value=\"5\">5 条/页</option>"
						+ "<option value=\"10\">10 条/页</option>"
						+ "</select></span>";
				$("#layui-laypage-2").html(pageContent);

				$("#layui-laypage-2 select option")
						.each(
								function() {
									if ($(this).val() == result.data.pageSize) {
										$(this).prop("selected","selected");
									}
								});
			} else {
				$("#layui-laypage-2").html(pageContent);
			}
			
			
		},
		error:function(){
			alert("异步请求失败");
		}
	});
}

//上一页，下一页
$("body").on("click","#layui-laypage-2 a",function(){
	pageNum = $(this).data("page");
	owner_search_page();
});
//确定页码
$("body").on("click","#layui-laypage-2 button",function(){
	let inputPageNum = $("#layui-laypage-2 input ").val();
	let maxPage = $("#layui-laypage-2 input ").prop("max");
	if(parseInt(inputPageNum) >= 1 && parseInt(inputPageNum) <= parseInt(maxPage)){
		pageNum = inputPageNum;
		owner_search_page();
	}else{
		layui.use('layer', function(){
			layer.msg("输入页码只能在1-" +maxPage+ "之间" ,{icon:2,time:3000});
		});
	}
});

//下拉框
$("body").on("change","#layui-laypage-2 select",function(){
	pageNum = 1;
	owner_search_page();
});
	
//搜索
function owner_search(){
	 //设置页码
	 pageNum = 1;
	 //调用查询方法
	 owner_search_page();
 }
	
//删除
function owner_del(roomNo){
        layer.confirm('确认要删除吗？',{
        	icon:3,
        	title:'提示信息'
       },function(index){
            //请求后端控制器删除数据
            //location.href="${pageContext.request.contextPath}/OwnerServlet?op=delete&roomNO=" + roomNo;
            
            $.getJSON("${pageContext.request.contextPath}/OwnerServlet",{op:"delete",roomNo:roomNo},function(result,status,xhr){
            	if(result.data == true){
            		layui.use('layer',function(){
            			layer.msg(result.message,{icon:1,time:3000});
            		});
            		//删除成功后再次调用查询方法
            		//设置页码
            		pageNum = $("#layui-laypage-2 span.layui-laypage-curr").data("page");
            		console.log(pageNum);
            		//调用查询方法
            		owner_search();
            	}else{//删除失败
            		layui.use('layer',function(){
            			layer.msg(result.message,{icon:2,time:3000});
            		});
            	}
            });
        });
    }





</script>
	<script src="lib/layui/layui.js" charset="utf-8"></script>
	<script src="js/x-layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'laydate', 'element', 'laypage', 'layer' ], function() {
			$ = layui.jquery;//jquery
			laydate = layui.laydate;//日期插件
			lement = layui.element();//面包导航
			laypage = layui.laypage;//分页
			layer = layui.layer;//弹出层

			//以上模块根据需要引入
			layer.ready(function() { //为了layer.ext.js加载完毕再执行
				layer.photos({
					photos : '#x-img'
				//,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
				});
			});
			var start = {
				min : laydate.now(),
				max : '2099-06-16 23:59:59',
				istoday : false,
				choose : function(datas) {
					end.min = datas; //开始日选好后，重置结束日的最小日期
					end.start = datas //将结束日的初始值设定为开始日
				}
			};

			var end = {
				min : laydate.now(),
				max : '2099-06-16 23:59:59',
				istoday : false,
				choose : function(datas) {
					start.max = datas; //结束日选好后，重置开始日的最大日期
				}
			};

			document.getElementById('LAY_demorange_s').onclick = function() {
				start.elem = this;
				laydate(start);
			}
			document.getElementById('LAY_demorange_e').onclick = function() {
				end.elem = this
				laydate(end);
			}
		});

		//批量删除提交
		function delAll() {
			layer.confirm('确认要删除吗？', function(index) {
				//捉到所有被选中的，发异步进行删除
				layer.msg('删除成功', {
					icon : 1
				});
			});
		}

		function question_show(argument) {
			layer.msg('可以跳到前台具体问题页面', {
				icon : 1,
				time : 1000
			});
		}
		/*添加*/
		function personnel_add(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}
		//编辑
		function personnel_edit(title, url, id, w, h) {
			url = url + "?id=" + id;
			x_admin_show(title, url, w, h);
		}

		/*删除*/
		function personnel_del(obj, id) {
			layer.confirm('确认要删除吗？', {
				icon : 3,
				title : '提示信息'
			}, function(index) {
				$.ajax({
					type : "post",
					url : "xxx",
					data : {
						id : id
					},
					dataType : "json",
					success : function(data) {
						//console.log(data);
						if (data.status == 1) {
							//发异步删除数据
							$(obj).parents("tr").remove();
							layer.msg(data.info, {
								icon : 6,
								time : 1000
							});
							setTimeout(function() {
								window.location.reload();
							}, 1000);
							return false;
						} else {
							layer.msg(data.info, {
								icon : 5,
								time : 1000
							});
							return false;
						}
					}
				});
				//发异步删除数据
				$(obj).parents("tr").remove();
				layer.msg('已删除!', {
					icon : 1,
					time : 1000
				});
			});
		}
	</script>

</body>
</html>